<template>
	<view class="pb-safe-area">
		<view class="flex flex-column">
			<view class="flex flex-column p-4 grid-gap-4">
				<view class="h10 text-white">提现至：</view>
				<view class="flex-1 p-4 bg-bg-grey rounded-4 pointer flex flex-center" hover-class="bg-hover"
					@tap="toogleSelectWithdrawalAccount">
					<uni-icons v-if="form.channels === 'alipay'" type="paperplane-filled" color="#1677ff" />
					<uni-icons v-else-if="form.channels === 'wxpay'" type="weixin" color="#00c250" />
					<uni-icons v-else type="info" color="#1677ff" />
					<view class="flex-1 px-4 text-white" v-if="form.channels === 'alipay'">
						<view class="font-weight-600 h9">{{ dealer.UserFinanceAccount.alipay.name }}</view>
						<view class="h10">支付宝</view>
					</view>
					<view class="flex-1 px-4 text-white" v-else-if="form.channels === 'wxpay'">
						<view class="font-weight-600 h9">{{ dealer.UserFinanceAccount.wxpay.name }}</view>
						<view class="h10">微信</view>
					</view>
					<view class="flex-1 px-4 text-white" v-else>
						<view class="font-weight-600 h9">请选择到账账户</view>
					</view>
					<uni-icons type="forward" color="var(--xl-placeholder)" />
				</view>
				<view v-show="showAccountList">
					<view class="flex mt-6 h10">
						<view class="flex-1 p-4 bg-bg-grey rounded-4 flex flex-center" hover-class="bg-hover"
							@tap="selectWithdrawalAccount('alipay')">
							<uni-icons type="paperplane-filled" color="#1677ff" />
							<view class="flex-1 px-4">
								<view class="font-weight-600 text-white">
									{{ dealer.UserFinanceAccount.alipay ? dealer.UserFinanceAccount.alipay.name : '未设置'
									}}
								</view>
								<view class="h10 text-placeholder">支付宝</view>
							</view>
							<view v-if="dealer.UserFinanceAccount.alipay" @tap.stop="showModalFor('alipay')"
								class="py-3 text-placeholder">
								修改收款信息</view>
							<view v-else class="text-placeholder">完善收款信息</view>
						</view>
					</view>
					<view class="flex mt-6 h10">
						<view class="flex-1 p-4 bg-bg-grey rounded-4 flex flex-center" hover-class="bg-hover"
							@tap="selectWithdrawalAccount('wxpay')">
							<uni-icons type="weixin" color="#00c250" />
							<view class="flex-1 px-4">
								<view class="font-weight-600 text-white">
									{{ dealer.UserFinanceAccount.wxpay ? dealer.UserFinanceAccount.wxpay.name : '未设置' }}
								</view>
								<view class="h10 text-placeholder">微信</view>
							</view>
							<view v-if="dealer.UserFinanceAccount.wxpay" @tap.stop="showModalFor('wxpay')" class="py-3 text-placeholder">
								修改收款信息</view>
							<view v-else class="text-placeholder">完善收款信息</view>
						</view>
					</view>
				</view>
			</view>
			<view class="p-4">
				<view class="bg-bg-grey rounded-4 mt-6 pb-10">
					<view class="flex flex-center py-10 mb-10">
						<view class="h1 font-weight-600 px-10 text-primary">￥</view>
						<input v-model="form.price" type="digit" class="flex-1 font-weight-600 price-input text-primary" focus
							autocomplete="off" placeholder="请输入提现金额" placeholder-class="h9 font-weight-400" />
						<text class="text-danger pointer h9 font-weight-600 px-6 py-4" @tap="allWithdrawal">全部提现</text>
					</view>
					<view class="mb-10 h9 px-4 text-dark-light-5">可提现余额：<text class="text-dark font-weight-600">{{
						dealer.user.withdrawal_price
					}}元</text>
						</view>
					<view class="flex-1"></view>
					<view class="flex flex-x-flex-end px-4">
						<button class="flex-1 bg-primary text-white withdrawal-btn rounded-round" :disabled="form.price <= 0"
							@tap="submitWithdrawal">立即提现</button>
					</view>
				</view>
			</view>
		</view>
		<x-popup v-model="showModal" top="30vh">
			<view class="h6 font-weight-600 p-4 text-center text-white">
				{{ accountForm.channels === 'wxpay' ? '设置微信账户' : '设置支付宝账户' }}
			</view>
			<view class="flex-1 flex flex-column  overflow-auto py-10">
				<view class="px-6 mb-4">
					<view class="text-dark-light-5 mb-2 h9">真实姓名</view>
					<input v-model="accountForm.name" class="bg-bg-grey flex-1 font-weight-600 p-4 rounded-4 text-white" placeholder="请输入姓名" placeholder-class="h9 font-weight-500"/>
				</view>
				<view class="px-6 mb-4">
					<view class="text-dark-light-5 mb-2 h9">手机号</view>
					<input v-model="accountForm.mobile" class="bg-bg-grey flex-1 font-weight-600 p-4 rounded-4 text-white" placeholder="请输入手机号" placeholder-class="h9 font-weight-500"/>
				</view>
				<view class="px-6 mb-4 flex flex-column">
					<view class="text-dark-light-5 mb-2 h9 text-left w-100">收款二维码</view>
					<view class="rounded-4 bg-bg-grey p-4 flex flex-center" style="width: 184px;height: 224px;" @tap="upload">
						<image v-if="accountForm.qrcode" :src="accountForm.qrcode" class="rounded-4" style="width: 160px;height: 200px;" />
						<view class="flex flex-column flex-y-center" v-else>
							<image src="@/static/uploads.png" style="width: 160px;height: 106px;" />
							<text class="text-grey h9">选择图片</text>
						</view>
					</view>
				</view>
				<view class="flex-1" />
				<view class="flex flex-center">
					<button class="bg-primary text-white w-50" @click="handleValidateButtonClick">保存</button>
				</view>
			</view>
		</x-popup>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { $page, $http, $message } from '@/utils';
const form = ref({
	channels: '',
	price: '',
})
type UserFinanceAccountKey = 'alipay' | 'wxpay';
const dealer = ref<{
	state: null | number,
	link: string,
	qrcode: string,
	user: any,
	UserFinanceAccount: {
		alipay: any,
		wxpay: any
	}
}>({
	state: null,
	link: '',
	qrcode: '',
	user: {
		people_num: '--',
		order_num: '--',
		order_price: '--',
		dealer_price: '--',
		withdrawal_price: '--',
	},
	UserFinanceAccount: {
		alipay: null,
		wxpay: null,
	},
})
const showAccountList = ref(false);
onLoad(() => {
	$page.title('提现');
	getDealer();
})
const toogleSelectWithdrawalAccount = () => {
	showAccountList.value = !showAccountList.value;
}
const getDealer = () => {
	$http.get('Dealer/dealer').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			dealer.value = res.data;
			if (res.data.state === 1) {
				if (res.data.UserFinanceAccount.wxpay) {
					form.value.channels = 'wxpay';
				} else if (res.data.UserFinanceAccount.alipay) {
					form.value.channels = 'alipay';
				} else {
					toogleSelectWithdrawalAccount();
				}
			}
		}
	})
}

const selectWithdrawalAccount = (channels: UserFinanceAccountKey) => {
	if (dealer.value.UserFinanceAccount[channels]) {
		form.value.channels = channels;
		showAccountList.value = false;
	} else {
		showModalFor(channels);
	}
}
const allWithdrawal = () => {
	form.value.price = dealer.value.user.withdrawal_price;
}
let formAjax = false;
const submitWithdrawal = () => {
	if (formAjax) return;
	formAjax = true;
	$http.post('Dealer/withdrawal', {
		data: form.value
	}).then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			$message.success('提现成功');
			getDealer();
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		} else {
			$message.error(res.msg);
		}
	}).finally(() => {
		formAjax = false;
	})
}
const accountForm = ref({
	valueAjax: false,
	channels: '',
	qrcode: '',
	name: '',
	mobile: ''
})
const showModal = ref(false);
const showModalFor = (channels: UserFinanceAccountKey) => {
	accountForm.value.channels = channels;
	accountForm.value.qrcode = '';
	accountForm.value.name = '';
	accountForm.value.mobile = '';
	if (channels === 'alipay' && dealer.value.UserFinanceAccount.alipay) {
		accountForm.value.qrcode = dealer.value.UserFinanceAccount.alipay.qrcode;
		accountForm.value.name = dealer.value.UserFinanceAccount.alipay.name;
		accountForm.value.mobile = dealer.value.UserFinanceAccount.alipay.mobile;
	} else if (channels === 'wxpay' && dealer.value.UserFinanceAccount.wxpay) {
		accountForm.value.qrcode = dealer.value.UserFinanceAccount.wxpay.qrcode;
		accountForm.value.name = dealer.value.UserFinanceAccount.wxpay.name;
		accountForm.value.mobile = dealer.value.UserFinanceAccount.wxpay.mobile;
	}
	showModal.value = true;
}
const handleValidateButtonClick = () => {
	if (accountForm.value.valueAjax) return;
	accountForm.value.valueAjax = true;
	$http.post('Dealer/saveUserFinanceAccount', {
		data: accountForm.value
	}).then(res => {
		if (res.code === 200) {
			$message.success('保存成功');
			showModal.value = false;
			getDealer();
		} else {
			$message.error('保存失败');
		}
	}).finally(() => {
		accountForm.value.valueAjax = false;
	})
}
const upload = () => {
	uni.chooseImage({
		count: 1, //默认9
		success: (res: any) => {
			$http.upload('Upload/upload', {
				name: 'file',
				filePath: res.tempFilePaths[0]
			}).then((res: any) => {
				if (res.code === $http.ResponseCode.SUCCESS) {
					accountForm.value.qrcode = res.data.url;
				} else {
					$message.error(res.msg);
				}
			})
		}
	});
}
</script>

<style lang="scss" scoped>
.withdrawal-btn[disabled]:not([type]) {
	color: var(--xl-white);
	background-color: var(--xl-primary-light-2);
}

.price-input {
	height: 10vw;
	line-height: 10vw;
	font-size: 10vw;
}
</style>